<template>
    <div class="pds">
        <van-skeleton title :row="15" :loading="loading.isFirst">

        <div class="typeBox my_divider" v-for="item in data.data" :key="item.id">
             <div class="mtw" >
               {{ item.name }}
                <div class="mts" style="color: #b2b2b2;font-size: 12px;">{{ item.count }}个商品</div>
             </div>

             <div style="width: 200px;" class="myflex">
                <van-button round size="small" type="danger" @click="()=>methods.deleteType(item.id)">删除</van-button>
                <van-button round size="small" type="primary" @click="()=>methods.editType(item)">编辑</van-button>
                <van-button round size="small" type="warning" v-if="item.isTop===0" @click="()=>methods.typeTop(item.id,1)">置顶</van-button>
                <van-button round size="small"  style="background: #808080;color: #fff;" v-if="item.isTop===1" @click="()=>methods.typeTop(item.id,0)">取消</van-button>
             </div>
        </div>



    
        <van-button block style="height: 42px;margin-top: 20px;" type="primary" @click="()=>methods.addType()">新增分类</van-button>
    </van-skeleton>
   </div>
</template>

<script setup>
import { deleteType, getGoodsTypes, typeTop } from '@/api/manage';
import { load } from '@/utils/load';
import { loading } from '@/views/dto/loadingDto';
import { showConfirmDialog, showToast } from 'vant';
import { onMounted, reactive, watchEffect } from 'vue';
import { useRouter } from 'vue-router';


const router=useRouter();
const data=reactive({
    name:"商品分类管理",
    data:[

    ]
})

const methods={
    /**
     * 类别置顶
     */
     typeTop:async (id,value)=>{
        load();
        const res=await typeTop({id:id,isTop:value});
        if(res.result===0){
            showToast("操作成功");
            methods.getGoodsTypes();
        }else{
            showToast(res.message);
        }
    },
    /**
     * 编辑类别
     */
    editType:async(value)=>{
        sessionStorage.setItem("type",JSON.stringify(value))
        router.push("/shop/type/edit");
    },
    /**
     * 删除商品供应商
     */
    deleteType:async (id)=>{
        showConfirmDialog({
      title: "提示",
      message: "类别下的商品将会成为无类别，确认要删除吗?",
    })
      .then(async () => {
        // on confirm
        load();
       const res=await deleteType({id:id});
        if (res.result === 0) {
          showToast("操作成功");
          methods.getGoodsTypes();
        } else {
          showToast(res.message);
        }
      })
      .catch(() => {
        // on cancel
        // console.log(222222)
      });
    },
    //添加商品类型
    addType:()=>{
     
     router.push("/shop/type/add");
    },
    /**
     * 获取商品类型
     */
    getGoodsTypes:async ()=>{
       const res=await getGoodsTypes();
       if(res.result===0){
         data.data= res.data;
         loading.isFirst=false;
       }
    }
}
onMounted(()=>{
    loading.isFirst=true;
})

watchEffect(()=>{
    methods.getGoodsTypes();
})
</script>

<style scoped>
.typeBox{
    height: 4rem;
    display: flex;
    justify-content: space-between;
}

.van-button{
    min-width: 60px !important;
    height: 25px;
}
</style>